<div class="d-flex flex-column w-100 h-100">

  <div class="d-flex flex-wrap justify-content-between align-items-center w-100 mb-0">

    <div class="d-flex align-items-center" *ngIf="currentFileData">
      <h3 class="my-0 fw-bold">Edit</h3>&nbsp;&nbsp;{{currentFileData?.path}}
    </div>

    <div class="d-flex align-items-center" *ngIf="!currentFileData">
      <h3 class="my-0 fw-bold">Hyper IDE</h3>
    </div>

    <div>

      <button
        mat-button
        *ngIf="currentFileData"
        color="primary"
        (click)="openShortkeys()">
        Shortkeys
      </button>

    </div>
  </div>

  <ng-container *ngFor="let file of openFiles;let index = index">
    <div
      class="active-codemirror-editor-{{index}} editor"
      [class.d-none]="currentFileData.path !== file.path">

      <ngx-codemirror
        class="codemirror-container h-100"
        [(ngModel)]="file.content"
        [options]="file.options">
      </ngx-codemirror>

    </div>
  </ng-container>

  <div class="d-flex justify-content-end align-items-center w-100 mt-2 mb-0">

    <app-openai-prompt
      *ngIf="currentFileData"
      (callback)="insertFromOpenAI($event)"
      callbackText="Use"
      dialogue="false"
      [currentFileContent]="currentFileData.content"
      [currentFileSession]="currentFileData.path"
      [fileType]="fileType()"
      class="w-100">
    </app-openai-prompt>

    <button
      *ngIf="currentFileData"
      mat-button
      color="primary"
      class="px-3"
      (click)="closeActiveFile()">
      Close
    </button>

    <button
      *ngIf="currentFileData"
      mat-button
      color="primary"
      class="px-3"
      (click)="saveActiveFile()">
      Save
    </button>

  </div>

</div>
